<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path"  value="${pageContext.request.contextPath}"/>
    
    
    

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/productlist.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<ul>
					<li>
						<a href="${path }/toindex">首页</a>
					</li>
					<li>
						<a href="${path}/productlist">手机数码</a>
					</li>
					<li>
						<a href="##">电脑办公</a>
					</li>
					<li>
						<a href="##">衣服用品</a>
					</li>
					<li>
						<a href="##">
							<img src="img/title.png" />
						</a>
					</li>
					<li>
							<a href="${path }/toorderlist">
						<span >我的订单</span>
						</a>
					</li>
					<li>
						<a href="##">
						<i class="iconcart"></i>
						<span ><a href="tocart">购物车</a></span>
						</a>
					</li>
					<li>
						<a href="##">
							<i class="iconcall"></i>
						<span >在线客服</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="contenttitle">
				<ul>
					<li>
						<a href="##">网上商城 </a>
					</li>
					<li>&gt;</li>
					<li>
						<a href="##">智能手机 </a>
					</li>
				</ul>
			</div>
			<div class="listscreen">
				<div class="listsort">
					<div class="listtitle">
						<strong>分类</strong>
					</div>
					<div class="navlist">
						<a href="##" class="listtow">智能手机</a>
						<ul>
							<li>
								<a href="##">Galaxy S系列</a>
							</li>
							<li>
								<a href="##">Galaxy Note6系列</a>
							</li>
							<li>
								<a href="##">Galaxy A系列</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>价格</strong>
					</div>
					<div class="navlist">
						<ul class="floatclearfix">
							<li>
								<label>
									<i></i>
									1700-2399元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									2400-3899元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									3900-4799元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									4800-6999元
								</label>
							</li>
							<li>
								<label>
									<i></i>
									6999元以上
								</label>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>颜色</strong>
					</div>
					<div class="navlist colorlist">
						<ul>
							<li>
								<a style="background:#000000">
								</a>
							</li>
							<li>
								<a style="background:#0f5eb9">
								</a>
							</li>
							<li>
								<a style="background:#fb0b0c">
								</a>
							</li>
							<li>
								<a style="background:#ffc6f4">
								</a>
							</li>
							<li>
								<a style="background:#a331bf">
								</a>
							</li>
							<li>
								<a style="background:#777777">
								</a>
							</li>
							<li>
								<a style="background:#ffffff">
								</a>
							</li>
							<li>
								<a style="background:#dbdbdb">
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="listsort">
					<div class="listtitle">
						<strong>促销活动</strong>
					</div>
					<div class="navlist">
						<ul class="floatclearfix">
							<li>
								<label>
									<i></i>
									免息
								</label>
							</li>
							<li>
								<label>
									<i></i>
									立减
								</label>
							</li>
							<li>
								<label>
									<i></i>
									买赠
								</label>
							</li>
							<li>
								<label>
									<i></i>
									以旧换新
								</label>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="listcont">
				<div class="titlesrch">
					<span>智能手机</span>
					
	            </div>
	            
	            	
	            	
	            	  <c:forEach items="${products}" var="p">
	            	<div class="listrowr">
	            		<div class="listboximg">
				            <a href="${path }/toproductinfo">
				            	<img src="img/${p.listimg}">
				            </a> 
				            <div class="iconactivebox">
							    <label class="iconorange">
									<span>免息</span>  
								</label>
							    <label class="iconorange">
									<span>立减</span>  
								</label>
						</div>		
						<div class="listscroll">
							<div class="colorrol">
								<ul>
									<li>
										<a class="thumbnail" style="background:#66343f"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#000000"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#61506a"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#859dcb"></a>
										</li>
									<li>
										<a class="thumbnail" style="background:#ecb6c1"></a>
										</li>
									</ul>
							</div>
					        <div class="productname">
					        
						        <span>
							       <a href="##">商品名： ${p.name}</a>
							       <span>
							       <a href="##">商品价格： ${p.price}</a>
						        </span>
						        <a href="##">折扣价： ${p.discountprice}</a>
						        </span>
						        <p class="listprice">商品描述： ${p.description}</p>
						        <a href="docart?productId=${p.id }">添加到购物车</a>
					        </div> 
				       </div>
					</div>
	            	</div>
  </c:forEach>		            	
					
					</div>
	            	</div>
	           
		
		
		<div class="totop" id="goto">
		<i class="icontop"></i>
	</div>
		
		<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(".floatclearfix i").click(function(){
			$(this).css({
				"background-position": "-44px -408px"
			})
		})
		var goto = document.getElementById("goto");
    	goto.onclick = function(){
    		var intervalId = setInterval(function(){
    			if(document.documentElement.scrollTop<=0){
    				clearInterval(intervalId);
    			}else{
    			document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
    		    }
    		},1)
    	}
	</script>
</html>
    